/*-----------------------------------------------------------------------------
* @Description:     新建报名登记
* @Version:         1.0.0
* @author:          gts
* @date             2017.11.14
* ==NOTES:=============================================
* v1.0.0(2017.11.14):
     初始生成
* ---------------------------------------------------------------------------*/
$(function(){
/*********************************************函数调用********************************************************************/
    
/*********************************************事件绑定********************************************************************/
       
    /**
     * 选择年级多选下拉框绑定
     */
    $('#selectGrade').multiselect();
    /**
     * 角色点击更改
     */
    $('.J_selectRole').change(function(){
        selectRoleChange();
        $('#selectGrade').val('').multiselect("refresh");
    });
    /*
        添加选项
    */
    $(document).on('click','.J_addOption',function(e){
        addOption(e);
    });
    /*
        删除选项
    */
    $(document).on('click','.J_delOption:eq(-1)',function(){
        delOption();
    });
    /**
     *判断是否显示问题 
     */
    $(".entry_form").click(function(){

        var entryForm= $('input:radio[name="entryForm"]:checked').val();
        
        if(entryForm == 1){//是
            if($('.box').length == 0){
                addQuestion();
                $('.J_del').css('color','grey');//J_del的css：页面进来，删除按钮就是灰色的（因为只有一个问题）
                $('.showContent').css('display','block');
            }
        }else{
            $(".box").remove();
            $('.showContent').css('display','none');
        }
    });
 
    /**
     * 点击form区域，验证截止时间
     */
    $('.J_endTime').blur(function(){
        validEndTime();
    });
    /*
        添加问题
    */
    $('.J_addQuestion').click(function(){
        if($(".J_optionForm:eq(-1)").data('bootstrapValidator')){
            $(".J_optionForm:eq(-1)").data('bootstrapValidator').destroy();
        }
        var optionLength = $('.J_optionForm:eq(-1)').find(".panel-option").length;

        formValidatorAddQuestionForm(optionLength);

        var 
            form = $('.J_optionForm:eq(-1)'),
            data = form.data('bootstrapValidator');
        if (data) {
            data.validate();

            if (!data.isValid()) {
                return false;
            }else{
                addQuestion();
                return true;
            }
        }
    });
    /*
        保存问卷
        (得验证外面的form对不对&&问题的最后一个form对不对，都对了才能发数据)
    */
    $(document).on('click','.J_save',function(e){
        var optionForm = $('.J_optionForm'),//问题form
            length = optionForm.length,//问题的个数
            optionLength,//每个问题的option个数
            optionData = [],
            optionResult,//每一个问题的验证结果
            i,
            data1=true;//用来存放总的验证结果
        
        for(i=0;i<length;i++){

            optionLength = optionForm.eq(i).find(".panel-option").length;

            if(optionForm.eq(i).data('bootstrapValidator')){
                optionForm.eq(i).data('bootstrapValidator').destroy();
            }
            formValidatorAllQuestionForm(i,optionLength);//验证问题框对不对
            optionResult = optionForm.eq(i).data('bootstrapValidator');//验证问题内容对不对

            if(optionResult){
                optionResult.validate();//循环地把每个问题的验证结果放到数组里
                optionData[i] = optionResult.isValid();
            }
            if(length < 2){
                data1 = optionData[0];//进行第一次循环，或者只有一个问题
            }else{
                data1 = data1 && optionData[i];
            }
        }
        
        formValidatorAddForm();//验证外边的信息对不对
        
        var
            form = $('.J_form'),
            data2 = form.data('bootstrapValidator'),//验证外面的input对不对
            data3 = validEndTime();//验证问卷截止时间对不对
        
        if (data2) {
            data2.validate();

            if(!data1){
                return false;
            }else if(data2.isValid() && data3){
                save(e);
                return true;
            }else{
                return false;
            }
            
        }
    });
    /*
        选择多选按钮，提示多选的要求
    */
    $(document).on('click','.optionsRadios',function(e){
        showRequirement(e);
    });
    /*
        点击收起，收起当前问题框
    */
    $(document).on('click','.J_retract',function(e){
        retractQuestion(e);
    })
    /*
        点击编辑，展开当前问题框
    */
    $(document).on('click','.J_edit',function(e){
        editQuestion(e);
    })
    /*
        点击删除，删除当前问题框
    */
    $(document).on('click','.J_del',function(e){
        delQuestion(e);
    })
/*********************************************函数声明********************************************************************/
    /**
     * 更换角色隐藏年级和科目实现
     */
    function selectRoleChange(){
        var 
            roleSelected = $('.J_selectRole').val();

        $('.J_selectRole').find("option:selected").each(function(i){ 
            if(roleSelected == 0){ 
                $('.J_course').addClass('hidden');
                $('.J_grade').addClass('hidden');
            }else if(roleSelected == 1){
                $('.J_course').removeClass('hidden');
                $('.J_grade').removeClass('hidden');
            }else if(roleSelected == 2){
                $('.J_course').addClass('hidden');
                $('.J_grade').removeClass('hidden');
            }
        });
    }
    /**
     * 验证登记截止时间
     */
    function validEndTime(){
        var 
            endTime = $('.J_endTime').val();

        if(endTime == ''){
            if($('.endTimeName').length == 0){
                $('.J_endTime').after('<i class="form-control-feedback has-error glyphicon glyphicon-remove styleColor" data-bv-icon-for="owner" style=""></i>')
                $('.J_validStyle').after('<small class="endTimeName has-error help-block" data-bv-validator="notEmpty" data-bv-for="name" data-bv-result="INVALID" style="color:#a94442;">报名截止时间不能为空</small>');
                $('.J_fontStyle').css('color', '#a94442')
            }
            return false;   
        }else{
            if($('.endTimeName').length > 0){
                $('.endTimeName').remove();
                $('.styleColor').remove();
                $('.J_fontStyle').css('color', '#3c763d')
            }
            return true;
        }
    }
    /*
        添加选项
    */
    function addOption(e){
        var optionLength = $(e.target).siblings('.J_optionForm').find('.optionName').length,
            dom = '<div class="form-group panel-option">\
                        <label class="col-sm-2 control-label optionName"></label>\
                        <div class="col-sm-4-7">\
                            <input class="new220 J_option" type="text" name="option" value=""/>\
                            <a href="javascript:;" class="J_delOption">删除选项</a>\
                        </div>\
                    </div>';
        $(e.target).siblings('.J_optionForm').append(dom);
        $(e.target).siblings('.J_optionForm').find('.optionName').last().html('<span class="requires">*</span>选项'+(optionLength+1));
        $(e.target).siblings('.J_optionForm').find('.J_delOption:eq(-2)').css('display','none');
    }
    /*
        删除选项
    */
    function delOption(){
        $('.J_delOption:eq(-1)').parents('.panel-option').remove();//本条选项移除
        $('.J_delOption:eq(-1)').css('display','');//上一条的删除按钮显示
    }
    /*
        添加问题
    */
    function addQuestion(){
        var length = $('.box').length,
            dom = '<!-- 问卷项 -->\
                    <div class="panel panel-info box">\
                        <div class="top">\
                            <h4 class="top-left"></h4>\
                            <span class="top-right top-right2 J_del">删除</span>\
                            <span class="top-right J_retract">收起</span>\
                            <span class="top-right top-right2 J_edit hidden">编辑</span>\
                        </div>\
                        <div class="panel-body panel-question"><!-- panel-question指问题panel，里边的子panel -->\
                            <form class="form-horizontal J_optionForm" method="" action="">\
                                <div class="form-group">\
                                    <label class="col-sm-2 control-label"><span class="requires">*</span>问题名称</label>\
                                    <div class="col-sm-4">\
                                        <input class="new220 J_questionTitle" type="text" name="questionTitle" value=""/>\
                                    </div>\
                                </div>\
                                <div class="form-group">\
                                    <label class="col-sm-2 control-label"><span class="requires">*</span>问题填写要求</label>\
                                    <div class="col-sm-4">\
                                        <textarea class="new220 J_requirement" type="text" name="description" value=""></textarea>\
                                    </div>\
                                </div>\
                                <div class="form-group optionType">\
                                    <label class="col-sm-2 control-label" for="name"><span class="requires">*</span>答题形式</label>\
                                    <div>\
                                        <label class="radio-inline">\
                                            <input type="radio" name="optionsRadiosinline" class="optionsRadios" value="1" checked> 单选\
                                        </label>\
                                        <label class="radio-inline">\
                                            <input type="radio" name="optionsRadiosinline" class="optionsRadios"  value="2"> 多选\
                                        </label>\
                                        <label class="radio-inline">\
                                            <input type="radio" name="optionsRadiosinline" class="optionsRadios"  value="3"> 下拉框\
                                        </label>\
                                        <label class="radio-inline">\
                                            <input type="radio" name="optionsRadiosinline" class="optionsRadios"  value="4"> 文本框\
                                        </label>\
                                        <label class="radio-inline">\
                                            <input type="radio" name="optionsRadiosinline" class="optionsRadios"  value="5"> 文本域\
                                        </label>\
                                        <label class="radio-inline">\
                                            <input type="radio" name="optionsRadiosinline" class="optionsRadios"  value="6"> 图片框\
                                        </label>\
                                    </div>\
                                </div>\
                                <div class="form-group panel-option"><!-- panel-option指的是选项面板 -->\
                                    <label class="col-sm-2 control-label optionName"><span class="requires">*</span>选项1</label>\
                                    <div class="col-sm-4-7">\
                                        <input class="new220 J_option" type="text" name="option" value=""/>\
                                        <a href="javascript:;" class="J_delOption">删除选项</a>\
                                    </div>\
                                </div>\
                            </form>\
                            <hr>\
                            <a href="javascript:;" class="J_addOption">添加选项</a>\
                        </div>\
                    </div>';
        $('.panel-major-body').append(dom);
        $('.top-left:eq(-1)').html('问题'+(length+1));
        if(length<1){
            $('.J_del').css('color','grey');
        }else{
            $('.J_del').css('color','#459ae9');
        }
    }

    /*
        保存问卷时验证问题外面的内容是否正确
    */
    function formValidatorAddForm(){
        $('.J_form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                title: {
                    validators: {
                        notEmpty: {
                            message: '问卷标题不能为空'
                        }
                    }
                },
                owner: {
                    validators: {
                        notEmpty: {
                            message: '发布人不能为空'
                        }
                    }
                }
            }
        });
    }
    /*
        收起问题时验证本问题里的内容是否正确，否则不让收起，避免收起乱发请求的问题
    */
    function formValidatorRetractQuestionForm(optionLength){
        $('.J_optionForm:eq(-1)').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                questionTitle: {
                    validators: {
                        notEmpty: {
                            message: '问题名称不能为空'
                        }
                    }
                },
                requirement: {
                    validators: {
                        notEmpty: {
                            message: '问题要求不能为空'
                        }
                    }
                },
                option: {
                    validators: {
                        notEmpty: {
                            message: '选项不能为空'
                        }
                    }
                },
                remindaheadDays: {
                    validators: {
                        regexp: {
                            regexp: /^[1-9]\d*$/,
                            message: '请输入正整数'
                        },
                        lessThan: {
                            value: optionLength,
                            /*inclusive: true,*/
                            message: '不能大于选项的个数'
                        }
                    }
                }
            }
        });
    }
    /*
        添加问题时验证上一个问题里的内容是否正确
    */
    function formValidatorAddQuestionForm(optionLength){
        $('.J_optionForm:eq(-1)').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                questionTitle: {
                    validators: {
                        notEmpty: {
                            message: '问题名称不能为空'
                        }
                    }
                },
                requirement: {
                    validators: {
                        notEmpty: {
                            message: '问题要求不能为空'
                        }
                    }
                },
                option: {
                    validators: {
                        notEmpty: {
                            message: '选项不能为空'
                        }
                    }
                },
                remindaheadDays: {
                    validators: {
                        regexp: {
                            regexp: /^[1-9]\d*$/,
                            message: '请输入正整数'
                        },
                        lessThan: {
                            value: optionLength,
                            /*inclusive: true,*/
                            message: '不能大于选项的个数'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: '问题填写要求不能为空'
                        }
                    }
                }
            }
        });
    }
    /*
        保存问卷时验证所有问题的内容是否正确
    */
    function formValidatorAllQuestionForm(i,optionLength){
        $('.J_optionForm').eq(i).bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                questionTitle: {
                    validators: {
                        notEmpty: {
                            message: '问题名称不能为空'
                        }
                    }
                },
                requirement: {
                    validators: {
                        notEmpty: {
                            message: '问题要求不能为空'
                        }
                    }
                },
                option: {
                    validators: {
                        notEmpty: {
                            message: '选项不能为空'
                        }
                    }
                },
                remindaheadDays: {
                    validators: {
                        regexp: {
                            regexp: /^[1-9]\d*$/,
                            message: '请输入正整数'
                        },
                        lessThan: {
                            value: optionLength,
                            /*inclusive: true,*/
                            message: '不能大于选项的个数'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: '问题填写要求不能为空'
                        }
                    }
                }
            }
        });
    }
    /*
        保存
    */
    function save(e){
        var 
            event = $(".J_form").serializeObject(),
            roleSelected = $('.J_selectRole').val(),
            selectCourse = $('.J_selectCourse').val(),
            selectGrades = $('.J_selectGrade').val(),
            selectGrade,
            eventItemDto = new Array(),//辅助数组,先声明一维
            length = $('.J_optionForm').length,//问题有多少个
            i, j, outer = {};

        if(selectGrades && selectGrades.length>0){
            selectGrade = ($('.J_selectGrade').val()).toString();
        }else{
            selectGrade = 0;
        }

        if(roleSelected == 0){
            jQuery.extend(event,{
                role: roleSelected
            });
        }else if(roleSelected == 1){
            jQuery.extend(event,{
                role: roleSelected,
                subjectId: selectCourse,
                gradeId: selectGrade
            });
        }else if(roleSelected ==2){
            jQuery.extend(event,{
                role: roleSelected,
                gradeId: selectGrade
            });
        }

        //里边的数据
        for(i=0;i<length;i++){
            var 
                box = $('.box').eq(i),//第i个问题
                optionLength = box.find('.J_option').length,//第i个问题里的选项的个数
                optionContent = [],//第i个问题的选项们
                questionTitle = $('.J_questionTitle').eq(i).val(),//第i个问题标题
                requirement = $('.J_requirement').eq(i).val(),//第i个问题填写要求
                type = $('.optionType').eq(i).find('.optionsRadios:checked').val(),//第i个问题类型
                limitNum = box.find('.J_limitNum').eq(i).val();//多选个数限制

            eventItemDto[i] = new Array();

            for(j=0;j<optionLength;j++){
                var option = box.find('.J_option').eq(j).val();//第i个问题的第j个选项
                optionContent[j] = {content : option};
            }
            
            eventItemDto[i] = {
                eventItem: {
                    name : questionTitle,
                    description : requirement,
                    type : type,
                    limit: limitNum
                },
                eventItemSelectList : optionContent
            };
        }
        jQuery.extend(outer,{
            event: event,
            eventItemDtoList : eventItemDto
        });
        
        $.ajax({
            type: jQuery.url.SignUpManagement.sendAddForm.type,
            url: jQuery.url.SignUpManagement.sendAddForm.url,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(outer),     //JSON.stringify
            dataType: "json",
            success: function (rs) {
                if( rs.code == 0){
                    LiterTip("提示信息", "发布成功！");
                    setTimeout(function(){
                        window.location.href= "/admin/event/list";
                    }, 1000);
                    
                }else{ 
                    Alert("提示信息", "返回参数不正确");
                }
            },
            error: function (rs) {
                Alert("提示信息", "请求失败！");
            }
        });
    }
    /*
        选择多选按钮，提示多选的要求
    */
    function showRequirement(e){
        var checked = $(e.target).val(),
            dom = '<div class="form-group J_checkOption">\
                <label class="col-sm-2 control-label">多选个数限制</label>\
                    <div class="col-sm-4-7">\
                        <input class="new220 J_limitNum"  placeholder="最多选几个"  type="text" name="remindaheadDays"  value=""/>\
                    </div>\
                </div>',
            str = '<div class="form-group panel-option">\
                        <label class="col-sm-2 control-label optionName"><span class="requires">*</span>选项1</label>\
                        <div class="col-sm-4-7">\
                            <input class="new220 J_option" type="text" name="option" value=""/>\
                            <a href="javascript:;" class="J_delOption">删除选项</a>\
                        </div>\
                    </div>';
        if($(e.target).parents(".J_optionForm").data('bootstrapValidator')){
            $(e.target).parents(".J_optionForm").data('bootstrapValidator').destroy();
        }
        if(checked == 2 && $(e.target).parents('.J_optionForm').find('.J_checkOption').length < 1){
            $(e.target).parents('.J_optionForm').children('.panel-option').remove();//清除其他选项所添加的问题div
            $(e.target).parents('.optionType').after(dom);//选择多选按钮，提示多选的要求
            $(e.target).parents('.J_optionForm').append(str);//插入第一个选项div
            $(e.target).parents('.J_addOption').css('display','');//显示添加选项按钮
        }
        if(checked == 1){
            $(e.target).parents('.J_optionForm').children('.panel-option').remove();//清除其他选项所添加的问题div
            $(e.target).parents('.J_optionForm').find('.J_checkOption').remove();//清除提示多选的要求
            $(e.target).parents('.J_optionForm').append(str);//插入第一个选项div
            $(e.target).parents('.J_optionForm').siblings('.J_addOption').css('display','');//显示添加选项按钮
        }
        if(checked == 3){
            $(e.target).parents('.J_optionForm').children('.panel-option').remove();//清除其他选项所添加的问题div
            $(e.target).parents('.J_optionForm').find('.J_checkOption').remove();//清除提示多选的要求
            $(e.target).parents('.J_optionForm').append(str);//插入第一个选项div
            $(e.target).parents('.J_optionForm').siblings('.J_addOption').css('display','');//显示添加选项按钮
        }
        if(checked == 4  || checked == 5 || checked == 6){
            $(e.target).parents('.J_checkOption').remove();//清除提示多选的要求
            $(e.target).parents('.J_optionForm').children('.panel-option').remove();//清除其他选项所添加的问题div
            $(e.target).parents('.J_optionForm').siblings('.J_addOption').css('display','none');//隐藏添加选项按钮
        }

    }
    /*
        点击收起，收起当前问题框
    */
    function retractQuestion(e){
        var box = $(e.target).parents('.box'),//面板
            top = $(e.target).parents('.top'),//问题栏
            main = top.siblings('.panel-question'),//问题主体
            retract = $(e.target),//收起按钮
            edit = $(e.target).siblings('.J_edit'),//编辑按钮
            del = $(e.target).siblings('.J_del'),//删除按钮
            retractForm = retract.parents('.top').siblings('.panel-question').children('.J_optionForm'),//需要验证的表单
            optionLength = retractForm.children('.panel-option').length;//当前要收起的问题中，选项的个数，用于验证

        if(retractForm.data('bootstrapValidator')){//如果已经验证过了，就清除验证，然后再验证
            retractForm.data('bootstrapValidator').destroy();
        }

        formValidatorRetractQuestionForm(optionLength);

        var 
            data = retractForm.data('bootstrapValidator');
        if (data) {
            data.validate();

            if (!data.isValid()) {
                return false;
            }else{
                main.hide();
                box.css('paddingBottom','0');//下边有个白色的条，是因为之前改了样式，有padding
                retract.css('display','none');
                edit.removeClass('hidden');
                del.css('display','block'); 
                return true;
            }
        }   
    }
    /*
        点击编辑，展开当前问题框
    */
    function editQuestion(e){
        var box = $(e.target).parents('.box'),//面板
            top = $(e.target).parents('.top'),//问题栏
            main = top.siblings('.panel-question'),//问题主体
            retract = $(e.target).siblings('.J_retract'),//收起按钮
            edit = $(e.target),//编辑按钮
            del = $(e.target).siblings('.J_del');//删除按钮

        main.show();
        box.css('paddingBottom','15px');//下边有个白色的条，是因为之前改了样式，有padding
        retract.css('display','block');
        edit.addClass('hidden');
        del.css('display','block');
    }
    /*
        点击删除，删除当前问题框
    */
    function delQuestion(e){
        var box = $(e.target).parents('.box'),
            length = $('.J_optionForm').length;//问题有多少个
        if(length<2){//删除之前就只有一个问题
            $('.J_del').css('color','grey');
            return false;
        }else{
            box.remove();
            valQuestionTitle();
            if(length<3){//这个是删除之后只有一个问题
                $('.J_del').css('color','grey');
            }
        }
    }
    /*
        点击删除，删除当前问题框之后，重新检查问题框的标题
        （主要是防止在中间删除问题）
    */
    function valQuestionTitle(){
        var box = $('.box'),
            length = box.length,
            i;
        for(i=0;i<length;i++){
            $('.top-left').eq(i).html('问题'+(i+1));
        }
    }
});